<template>
  <div>

    <el-row>

      <!--搜索-->
      <el-input placeholder="公司名称" style="width: 25%;margin-top: 1%"/>

      <!--操作按钮-->
      <span style="margin-left: 1%">
        <el-button type="primary" style="width: 8%" @click="dialogVisible = true" icon="el-icon-plus">新增</el-button>
        <el-button type="primary" style="width: 8%" icon="el-icon-search">查询</el-button>
        <el-button type="primary" style="width: 8%" icon="el-icon-rank">导出</el-button>
      </span>
    </el-row>

    <!--表格-->
    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        stripe
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          prop="name"
          label="企业名称"
          sortable
          width="280">
      </el-table-column>

      <el-table-column
          prop="recordnumber"
          label="注册/备案号"
          sortable
          width="280">
      </el-table-column>

      <el-table-column
          prop="nameofregisteredcommodity"
          label="注册/备案商品名称"
          sortable
          width="280">
      </el-table-column>

      <el-table-column
          prop="medicaldevicemanagementcategory"
          label="医疗器械管理类别"
          sortable
          width="280">
      </el-table-column>

      <el-table-column
          prop="filingperson"
          label="注册/备案人"
          sortable
          width="280">
      </el-table-column>

      <el-table-column
          prop="approvaldate"
          label="批准日期"
          sortable
          width="280">
      </el-table-column>

      <el-table-column
          prop="validuntil"
          label="有效期至"
          sortable
          width="280">
      </el-table-column>

      <el-table-column
          prop="orderNum"
          label="操作">
        <template slot-scope="scope">

          <el-button type="text" @click="dialogVisible = true">变更</el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog
        title="用户基本信息编辑"
        :visible.sync="dialogVisible"
        width="80%"
        :before-close="handleClose">
      <el-form :model="editForm" ref="editForm" label-width="auto" class="demo-editForm">

        <el-col :span="12">
          <el-form-item label="注册/备案号" prop="recordnumber">
            <el-input v-model="editForm.recordnumber"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="注册/备案产品名称:" prop="registeredproductname">
            <el-input v-model="editForm.registeredproductname"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="医疗器械管理类别" prop="medicaldevicemanagementcategory">
            <el-input v-model="editForm.medicaldevicemanagementcategory"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="注册/备案人" prop="filingperson">
            <el-input v-model="editForm.filingperson"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="注册人地区" prop="registrantsregion">
            <el-input v-model="editForm.registrantsregion"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="注册/备案人地址" prop="addressoffiler">
            <el-input v-model="editForm.addressoffiler"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="器械类别" prop="devicecategory">
            <el-select v-model="editForm.devicecategory"></el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="分类编码" prop="userdescription" >
            <el-select v-model="editForm.classificationcode1" style="width: 30%"></el-select>
            <el-select v-model="editForm.classificationcode2" style="width: 30%"></el-select>
            <el-select v-model="editForm.classificationcode3" style="width: 30%"></el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="代理人名称" prop="nameofagent">
            <el-input v-model="editForm.nameofagent"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="代理人地区" prop="agentarea">
            <el-input v-model="editForm.agentarea"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="代理人住址" prop="devicecategory">
            <el-input v-model="editForm.addressofagent"></el-input>
          </el-form-item>
        </el-col>



        <el-col :span="12">
          <el-form-item label="生产地址" prop="productionaddress">
            <el-input v-model="editForm.productionaddress"></el-input>
          </el-form-item>
        </el-col>


        <el-col :span="12">
          <el-form-item label="说明书附件" prop="devicecategory">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="注册/备案电子版" prop="devicecategory">
            <!--            <el-select v-model="editForm.devicecategory"></el-select>-->
            <el-button size="small" type="primary">点击上传</el-button>
<!--            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="产地" prop="placeoforigin">
            <el-input v-model="editForm.placeoforigin"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产国或地区" prop="productionaddress">
            <el-input v-model="editForm.countryorregionofproduction"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产商名称" prop="nameofmanufacturer">
            <el-input v-model="editForm.nameofmanufacturer"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="售后服务机构" prop="aftersalesserviceorganization">
            <el-input v-model="editForm.aftersalesserviceorganization"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="批准日期" prop="approvaldate">
            <el-date-picker
                v-model="approvaldate"
                type="datetime"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有效期至" prop="validuntil">
            <el-date-picker
                v-model="validuntil"
                type="datetime"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-col>


        <!--        <el-col :span="12">-->
        <!--          <el-form-item>-->
        <el-button type="primary" @click="submitForm('editForm')">立即创建</el-button>
        <el-button @click="resetForm('editForm')">重置</el-button>
        <!--          </el-form-item>-->
        <!--        </el-col>-->

      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Zc",


  data() {
    return {

      labelCol: {
        span: 16
      },
      wrapperCol: {
        span: 16
      },

      //是否弹框
      dialogVisible: false,

      //表格数据
      tableData: [],
      //表单数据
      editForm: {

      },

      methods: {
        //关闭表单清空数据方法
        handleClose(done) {
          this.$confirm('确认关闭？')
              .then(_ => {
                done();
                //清空表单数据
                this.editForm = {}
              })
              .catch(_ => {
              });
        },
      }

    }
  }

}
</script>

<style scoped>

</style>
